<template>
  <div id="com-global-d300" ref="ComGlobalD300" class="com-global-d300"></div>
</template>

<script lang="ts">
import * as d3 from 'd3'
import { Vue, Component } from 'vue-property-decorator'

@Component({})
export default class ComGlobalD300 extends Vue {
  mounted () {
    this.initData()
  }

  initData () {
    const width = (this.$refs.ComGlobalD300 as any).clientWidth
    const height = (this.$refs.ComGlobalD300 as any).clientHeight

    let i = 0

    const svg = d3
      .select('#com-global-d300')
      .append('svg')
      .attr('width', width)
      .attr('height', height)

    svg
      .append('rect')
      .attr('width', width)
      .attr('height', height)
      .on('ontouchstart' in document ? 'touchmove' : 'mousemove', particle)

    function particle () {
      // @ts-ignore
      const m = d3.mouse(this)

      svg
        .insert('circle', 'rect')
        .attr('cx', m[0])
        .attr('cy', m[1])
        .attr('r', 1e-6)
        .style('stroke', d3.hsl((i = (i + 1) % 360), 1, 0.5) as any)
        .style('stroke-opacity', 1)
        .transition()
        .duration(2000)
        .ease(Math.sqrt)
        .attr('r', 100)
        .style('stroke-opacity', 1e-6)
        .remove()

      d3.event.preventDefault()
    }
  }
}
</script>

<style lang="less">
.com-global-d300 {
  margin: 0;
  width: 100%;
  height: 100vh;
  rect {
    fill: none;
    pointer-events: all;
  }
  circle {
    fill: none;
    stroke-width: 2.5px;
  }
}
</style>
